<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.contain{width: 720px;height: 480px;margin: 0 auto;border: 1px solid red;background: #CCCCCC;position: relative;}
			/*720 480*/
		</style>
	</head>
		
	<body>
		<div class="contain" id='contain'>
			
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
	<script type="text/javascript">
		var timer;
		var food;
		var snake;
		var sum=0;
		var thelast;
		function Food(){
			this.width=20;
			this.height=20;
			this.position='absolute';
			this.color='green';
			this._food=null;
			this.x==0;
			this.y=0;
			this.show=function(){
				var contain=document.getElementById('contain');
				if(this._food==null){
					this._food=document.createElement('div');
					this._food.style.width=this.width+'px';
					this._food.style.height=this.height+'px';
					this._food.style.position='absolute';
					this._food.style.backgroundColor=this.color;
					contain.appendChild(this._food);
				}
				var xy=[];
				var row=[];
				for (var i=0;i<snake.body.length;i++) {
					xy.push(snake.body[i].slice(0,2));
				}
				var zongshu=zuobiao(36,24);			//生成坐标
				var thenewshu=sort(xy);			//身体转换
				//var thelasyshu=[];
				/*for(var p=0;p<shiyan.length;p++){
					if(zongshu.indexOf(shiyan[p])!=-1){
						thelasyshu.push()
						zongshu.splice(thenewshu[p],)
					}
				}*/
				for(var p=xy.length-1;p>=0;p--){
					zongshu.splice(thenewshu[p],1)
				}
				if(zongshu.length<=0){
					clearInterval(timer)
					alert('you are the best')
					return
				}
				//console.log(zongshu)
				/*for(var i=0;i<zongshu.length;i++){
					console.log(zongshu[i])	
				}*/
				
				//console.log(zongshu.indexOf([3,2]))
				var suiji=Math.floor(Math.random()*zongshu.length);
				 //this.x=zongshu[suiji].join('').split('')[0];
				 //this.y=zongshu[suiji].join('').split('')[1];
				 this.x=zongshu[suiji].join(',').split(',')[0];
				 this.y=zongshu[suiji].join(',').split(',')[1];
				/*console.log(suiji)
				console.log(zongshu[suiji])	
				//console.log(ceshi1)
				//console.log(ceshi2)
				console.log(this.x)	
				console.log(this.y)	*/
				/*var xynew=[];
				this.x=Math.floor(Math.random()*20);//36
				xynew.push(this.x)
				this.y=Math.floor(Math.random()*10);//24
				xynew.push(this.y)*/
										
					//break
					/*if(!panduan(xynew,xy)){
						//console.log(panduan(xynew,xy))						
						break	
					}*/

					/*if((row.indexOf(this.y)<0)||(col.indexOf(this.x)<0)){
						break
					}*/
				
				//return
				this._food.style.left=this.x*this.width+'px';
				this._food.style.top=this.y*this.height+'px';
			}
		}
		function Snake(){
			var contain=document.getElementById('contain');
			this.width=20;
			this.height=20;
			this.position='absolute';
			this.direct='';
			this.body=[[3,2,'red',null],[2,2,'blue',null],[1,2,'blue',null],[0,2,'blue',null]];
			this.show=function(){
				for(var i=0;i<this.body.length;i++){
					if(this.body[i][3]==null){
						this.body[i][3]=document.createElement('div');
						this.body[i][3].style.position='absolute';
						this.body[i][3].style.width=this.width+'px';
						this.body[i][3].style.height=this.height+'px';
						this.body[i][3].style.backgroundColor=this.body[i][2];
						contain.appendChild(this.body[i][3]);
					}
					this.body[i][3].style.left=this.body[i][0]*this.width+'px';
					this.body[i][3].style.top=this.body[i][1]*this.height+'px';
					//console.log(this.body[i][0])
				}
			}
			this.setDirect=function(code){
				  switch(code)
           		 {
	                case 37:
	                    this.direct='left';
	                    break;
	                case 38:
	                    this.direct='up';
	                    break;
	                case 39:
	                    this.direct='right';
	                    break;
	                case 40:
	                    this.direct='down';
	                    break;
            	}
			}
			this.move=function(){				
				var length=this.body.length-1;
				if(this.direct!=''){//不加此判断  在中期会出现缺失现象
					for(var i=length;i>0;i--){
						this.body[i][0]=this.body[i-1][0];	//横坐标
						this.body[i][1]=this.body[i-1][1];	//纵坐标
						//console.log(this.body[i][0])
					}
				}
				/* this.body[0][0]=this.body[0][0]+1;
				 this.body[1][0]=this.body[1][0]+1;*/
				switch(this.direct){
					case 'right':
					this.body[0][0]+=1;
					break;
					case 'left':
					this.body[0][0]-=1;
					break;
					case 'up':
					this.body[0][1]-=1;
					break;
					case 'down':
					this.body[0][1]+=1;
					break;
					default:
					return
				}
				if(this.body[0][0]==food.x&&this.body[0][1]==food.y){//吃到实物
					var x=this.body[length][0];
					var y=this.body[length][1];					
					sum++;
					document.title='分数:'+sum+'分';
					this.body.push([x,y,'blue',null])
					food.show()
				}
				if(this.body[0][0]<0||this.body[0][0]>35||this.body[0][1]<0||this.body[0][1]>23){
					alert("gg");
					clearInterval(timer)
					return
				}
				for (var i=1;i<this.body.length;i++) {
					if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1]){
						alert('吃到自己死');
	                    clearTimeout(timer);
	                    return;
					}
				}
				this.show()				
			}
			
		}
		function sort(shuzu){
		var linshi=[];
		for(var i=0;i<shuzu.length;i++){
			linshi.push(shuzu[i][1]*20+shuzu[i][0])
		}
		//return linshi;
		linshi.sort(function(a,b){if(a<b){return -1}else if(a>b){return 1}else{return 0}});//升序
		return linshi
		}
		function zuobiao(xlength,ylength){
			var zzk=[];
			for(var i=0;i<ylength;i++){
			//tArray[i].push(i)
				for(var j=0;j<xlength;j++){
					//tArray[j]=new Array();
					zzk.push(j);
					zzk.push(i);
				}
			}
			var k=0;
			var koz=[];
			for(var i=0;i<xlength*ylength;i++){
				koz[i]=new Array();
				koz[i].push(zzk.slice(k,k+2))
				k=k+2;
			}
			return koz
		}
		function panduan(one,two){                 ///计算量过大  舍弃使用while循环
			var flag=true;
			for(var j=0;j<two.length;j++){
				if(one==two[j]){
					flag=false;
					break
				}
			}
			return flag
		}
		window.onload=function(){
			var contain=document.getElementById('contain');
			 food=new Food();
			 snake=new Snake();
			food.show();
			snake.show();
			//snake.move()
			//timer =setInterval('snake.move()',100)错误，snake为局部，setinterval会把“”里面的当成全局变量，所以抓取不到，全局不能访问局部onload相当于局部
			timer =setInterval(function(){
				snake.move()
				//snake.direct
				//console.log(snake.direct)
			},100);
		    document.onkeydown = function(e)
        	{
        		ev=e||window.event;
	        	var code=ev.keyCode;
				if(thelast){
					if(thelast==37){//左，则不能右
						if(code==39){
							return
						}
					}else if(thelast==39){
						if(code==37){
							return
						}
					}else if(thelast==38){
						if(code==40){
							return
						}
					}else if(thelast==40){
						if(code==38){
							return
						}
					}	
				}
				thelast=code;
				snake.setDirect(code);	
				//console.log(code)
        	}
			
		}
	</script>
</html>
